<template>
    <div>
        <Card>
            <Row>
                <Form :model="filters" ref="filters" label-position="right" :label-width="90" inline>
                    <FormItem label="小区">
                        <div class="filters-input">
                            <el-select v-model="filters.housingId" @change="housechange" placeholder="请选择小区" filterable no-data-text="暂无数据">
                                <el-option v-for="item in houseList" :key="item.id" :value="item.id" :label="item.name"></el-option>
                            </el-select>
                        </div>
                    </FormItem>
                </Form>
            </Row>
            <!--功能按钮-->
            <Row>
                <Button type="primary" icon="md-add" @click="openAdd" style="margin-right: 10px;">新增</Button>
            </Row>
            <!--数据展示-->
            <el-table stripe border v-loading="tableLoading" :data="tableData" ref="table" style="width: 100%">
                <template slot="empty">暂无数据</template>
                <el-table-column prop="deviceName" label="设备名称" width="160px"></el-table-column>
                <el-table-column prop="repeatType" label="重复类型" width="160px">
                    <template slot-scope="scope">
                        <p v-if="scope.row.repeatType == 1" style="color:red">只提醒一次</p>
                        <p v-if="scope.row.repeatType == 2" style="color:green">每天提醒一次</p>
                        <p v-if="scope.row.repeatType == 3" style="color:blue">每周提醒一次</p>
                        <p v-if="scope.row.repeatType == 4" style="color:yellow">半个月提醒一次</p>
                        <p v-if="scope.row.repeatType == 5" style="color:pink">一个月提醒一次</p>
                        <p v-if="scope.row.repeatType == 6" style="color:purple">每年提醒一次</p>
                    </template>
                </el-table-column>
                <el-table-column prop="notificationOfficerName" label="通知角色" width="160px"></el-table-column>
                <el-table-column prop="messageType" label="通知方式" width="160px">
                    <template slot-scope="scope">
                        <p v-if="scope.row.messageType.includes('1')" style="color:blue">钉钉</p>
                        <p v-if="scope.row.messageType.includes('2')" style="color:green">微信</p>
                    </template>
                </el-table-column>
                <el-table-column prop="startTime" label="开始时间"></el-table-column>
                <el-table-column prop="endTime" label="结束时间"></el-table-column>
                <el-table-column label="操作" align="center" width="150px">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="openModify(scope.row)">修改</el-button>
                        <el-button size="mini" type="danger" @click="openDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
            <!--新增-->
            <Modal v-model="addVisible" title="新增">
                <el-form :model="adds" :rules="rules" ref="addsForm" label-position="right" label-width="90px">
                    <el-form-item label="小区" prop="housingName">
                        <div>
                            <el-select v-model="adds.housingName" @change="addhousechange" placeholder="请选择小区" filterable no-data-text="暂无数据">
                                <el-option v-for="item in houseList" :key="item.id" :value="item" :label="item.name"></el-option>
                            </el-select>
                        </div>
                    </el-form-item>
                    <el-form-item label="设备名称" prop="deviceName">
                        <el-select v-model="adds.deviceName" @change="deviceChange" placeholder="请选择设备" filterable no-data-text="暂无数据">
                            <el-option v-for="item in deviceList" :key="item.id" :value="item" :label="item.deviceLocation+'/'+item.installationLocation+'/'+item.deviceName"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="重复类型" prop="repeatType"><!--@change="repeatTypeChange"-->
                        <el-select v-model="adds.repeatType" placeholder="请选择提示类型" filterable no-data-text="暂无数据">
                            <el-option v-for="item in repeatTypeList" :key="item.value" :value="item.value" :label="item.name"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="初次提醒" prop="notificationTime">
                        <DatePicker v-model="adds.notificationTime" type="datetime" placeholder="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"></DatePicker>
                    </el-form-item>
                    <el-form-item label="开始日期" prop="startTime">
                        <DatePicker v-model="adds.startTime" type="date" placeholder="yyyy-MM-dd" value-format="yyyy-MM-dd"></DatePicker>
                    </el-form-item>
                    <el-form-item label="结束日期" prop="endTime">
                        <DatePicker v-model="adds.endTime" type="date" placeholder="yyyy-MM-dd" value-format="yyyy-MM-dd"></DatePicker>
                    </el-form-item>
                    <el-form-item label="通知角色" prop="roleSelectList">
                        <treeselect v-model="adds.roleSelectList" :options="roleTreeList" @select="roleSelectListen" @deselect="roleDeSelectListen" :multiple="true" noChildrenText="没有子节点" noOptionsText="暂无选项"
                                    noResultsText="没有发现结果" :default-expand-level="1" placeholder="选择角色" :show-count="true"/>
                    </el-form-item>
                    <el-form-item label="通知方式" prop="messageTypeArrays">
                        <el-select v-model="adds.messageTypeArrays" multiple placeholder="请选择提示方式"  no-data-text="暂无数据">
                            <el-option v-for="item in messageTypeList" :key="item.value" :value="item.value" :label="item.name"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <Button type="text" size="large" @click="onCancel">取消</Button>
                    <Button type="primary" size="large" @click="handleSubmit('addsForm')">确定</Button>
                </div>
            </Modal>
            <!--修改-->
            <Modal v-model="modifyVisible" title="修改">
                <el-form :model="modifys" :rules="rules"  ref="modifyForm" label-position="right" label-width="90px">
                    <el-form-item label="小区">
                        <div>
                            <el-select v-model="modifys.housingId" placeholder="请选择小区" disabled no-data-text="暂无数据">
                                <el-option v-for="item in houseList" :value="item.id" :key="item.id" :label="item.name"></el-option>
                            </el-select>
                        </div>
                    </el-form-item>
                    <el-form-item label="设备名称">
                        <el-select v-model="modifys.deviceName" placeholder="请选择设备" disabled no-data-text="暂无数据">
                            <el-option v-for="item in deviceList" :key="item.id" :value="item" :label="item.deviceName"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="重复类型" prop="repeatType">
                        <el-select v-model="modifys.repeatType" placeholder="请选择提示类型" filterable no-data-text="暂无数据">
                            <el-option v-for="item in repeatTypeList" :key="item.value" :value="item.value" :label="item.name"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="初次提醒" prop="notificationTime">
                        <DatePicker v-model="modifys.notificationTime" type="datetime" placeholder="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"></DatePicker>
                    </el-form-item>
                    <el-form-item label="开始日期" prop="startTime">
                        <DatePicker v-model="modifys.startTime" type="date" placeholder="yyyy-MM-dd" value-format="yyyy-MM-dd"></DatePicker>
                    </el-form-item>
                    <el-form-item label="结束日期" prop="endTime">
                        <DatePicker v-model="modifys.endTime" type="date" placeholder="yyyy-MM-dd" value-format="yyyy-MM-dd"></DatePicker>
                    </el-form-item>
                    <el-form-item label="通知角色" prop="selectIdList">
                        <treeselect v-model="modifys.selectIdList" @select="roleSelectListen" @deselect="roleDeSelectListen" :options="roleTreeList" :multiple="true" noChildrenText="没有子节点" noOptionsText="暂无选项"
                                    noResultsText="没有发现结果" :default-expand-level="1" placeholder="选择角色" :show-count="true"/>
                    </el-form-item>
                    <el-form-item label="通知方式" prop="selectTypeList">
                        <el-select v-model="modifys.selectTypeList" multiple placeholder="请选择提示方式" no-data-text="暂无数据">
                            <el-option v-for="item in messageTypeList" :key="item.value" :value="item.value" :label="item.name"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <Button type="text" size="large" @click="onCancel">取消</Button>
                    <Button type="primary" size="large" @click="modifySubmit('modifyForm')">确定</Button>
                </div>
            </Modal>
        </Card>
    </div>
</template>

<script>
    import Treeselect from "@riophae/vue-treeselect";
    import moment from "moment";

    export default {
        components: {
            Treeselect,
        },
        data(){
          return{
              pageNum:1,
              pageSize:10,
              pageTotal:0,

              rules:{
                  housingName:[
                      {
                          required: true,
                          message: "请选择小区",
                      }
                  ],
                  deviceName:[
                      {
                          required: true,
                          message: "请选择设备",
                      }
                  ],
                  startTime:[
                      {
                          required: true,
                          message: "请选择开始时间",
                      }
                  ],
                  repeatType:[
                      {
                          required: true,
                          message: "请选择重复类型",
                      }
                  ],
                  endTime:[
                      {
                          required: true,
                          message: "请选择结束时间",
                      }
                  ],
                  notificationTime:[
                      {
                          required: true,
                          message: "请选择提醒时间",
                      }
                  ],
                  roleSelectList:[
                      {
                          required: true,
                          message: "请选择通知角色",
                      }
                  ],
                  messageTypeArrays:[
                      {
                          required: true,
                          message: "请选择通知方式",
                      }
                  ],
                  selectIdList:[
                      {
                          required: true,
                          message: "请选择通知角色",
                      }
                  ],
                  selectTypeList:[
                      {
                          required: true,
                          message: "请选择通知方式",
                      }
                  ],
              },
              repeatTypeList:[{
                  value:1,
                  name:"只提醒一次",
              },{
                  value:2,
                  name:"每天提醒一次",
              },{
                  value:3,
                  name:"每周提醒一次",
              },{
                  value:4,
                  name:"半个月提醒一次",
              },{
                  value:5,
                  name:"一个月提醒一次",
              },{
                  value:6,
                  name:"每年提醒一次",
              }],
              messageTypeList:[{
                  value:1,
                  name:"钉钉",
              },{
                  value:2,
                  name:"微信",
              }],
              houseList:[],
              tableData:[],
              deviceList:[],
              formList:[],
              treeList:[],
              roleTreeList:[],
              memberList:[],
              roleArray:[],

              filters:{
                  housingId:"",
              },
              adds:{
                  housingId:"",
                  housingName:"",
                  routingName:"",
                  notificationOfficerName:"",
              },
              modifys:{
                  notificationOfficerName:"",
                  selectTypeList: []
              },

              tableLoading:false,
              addVisible:false,
              modifyVisible:false,
          }
        },

        created:function(){
            this.gethouseList();
            this.roleTree();
        },

        methods:{
            //获取小区
            gethouseList: function () {
                this.postRequest("/api/housing/getHousingByLogin").then(resp => {
                    this.houseList = resp;
                    this.filters.housingId = resp[0].id;
                    this.housechange();
                });
            },
            housechange:function () {
                this.loadData();
            },
            loadData:function () {
                this.tableLoading=true;
                this.filters.pageNum=this.pageNum;
                this.filters.pageSize=this.pageSize;
                this.postRequest("/api/depp/getPlanList",this.filters).then(resp=>{
                    if (resp.code==20000){
                        this.tableData=resp.data.list;
                        this.pageTotal=resp.data.total;
                        this.tableLoading=false;
                    }
                });
            },
            //获取设备列表
            getdeviceList:function(){
                this.getRequest("/api/device/ledgerLoadingData?housingId="+this.adds.housingId).then(resp=>{
                    if (resp.code==20000){
                        this.deviceList=resp.data;
                    }
                });
            },
            //加载角色
            roleTree() {
                this.postRequest("/api/manageHR/roleLoadData").then(res => {
                    if (res.code == 20000) {
                        this.roleTreeList = res.data;
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //打开新增
            openAdd:function(){
                this.adds.housingId=this.filters.housingId;
                this.getdeviceList();
                this.addVisible=true;
            },
            addhousechange:function(value){
                this.adds.housingId=value.id;
                this.adds.housingName=value.name;
                this.getdeviceList();
            },
            deviceChange:function(value){
                this.adds.deviceId=value.id;
                this.adds.deviceCode=value.deviceCode;
                this.adds.deviceName=value.deviceName;
                this.adds.deviceType=value.equipmentType;
            },
            repeatTypeChange:function(value){
                if (value==1){
                    this.adds.endTime=this.adds.startTime;
                }
            },
            //通知角色选中监听
            roleSelectListen:function(node){
                this.roleArray.push(node);
            },
            //通知角色取消选中监听
            roleDeSelectListen:function(node){
                let index=this.roleArray.findIndex(function (item) {
                   if (item.id==node.id){
                       return item.id==node.id;
                   }
                });
                this.roleArray.splice(index,1);
            },
            //根据ID找角色信息
            findRoleById:function(arr,data){
                if (typeof data === "object") {
                    for (let i = 0; arr[i]!== undefined;i++) {
                        for (let j = 0; data[j] !== undefined; j++) {
                            if (arr[i] == data[j].id) {
                                this.roleArray.push(data[j]);
                            }
                        }
                    };
                    for (let i = 0; data[i]!== undefined; i++) {
                        this.findRoleById(arr,data[i].children);
                    };
                }
            },
            acTiveArrStringFun:function(obj){
                let idArray=[];
                let nameArray=[];
                if (obj!=null && obj.length!=0){
                    for (let i = 0; i <obj.length ; i++) {
                        idArray.push(obj[i].id);
                        nameArray.push(obj[i].label);
                    }
                }
                this.adds.notificationOfficerId=idArray.toString();
                this.adds.notificationOfficerName=nameArray.toString();
                this.modifys.notificationOfficerId=idArray.toString();
                this.modifys.notificationOfficerName=nameArray.toString();
            },
            //确认新增
            handleSubmit:function(addsForm){
                this.$refs[addsForm].validate((valid) => {
                    if (valid) {
                        this.adds.startTime=moment(this.adds.startTime).format("YYYY-MM-DD");
                        this.adds.endTime=moment(this.adds.endTime).format("YYYY-MM-DD");
                        this.adds.notificationTime=moment(this.adds.notificationTime).format("YYYY-MM-DD HH:mm:ss")
                        this.adds.messageType=this.adds.messageTypeArrays.toString();
                        this.acTiveArrStringFun(this.roleArray);
                        this.postRequest("/api/depp/saveOrUpdate",this.adds).then(resp=>{
                            if (resp.code==20000){
                                this.$Message.success("新增成功");
                                this.addVisible=false;
                                this.loadData();
                            }
                        });
                    }
                });
            },
            //打开修改页面
            openModify:function(row){
                this.getRequest("/api/depp/getPlanList?id="+row.id).then(resp=>{
                    if (resp.code==20000){
                        const data = resp.data[0];
                        //通知人员转换
                        let tempIdList=[];
                        let selectIdArray=data.notificationOfficerId.split(",");
                        for (let i = 0; i <selectIdArray.length ; i++) {
                            tempIdList.push(parseInt(selectIdArray[i]));
                        }
                        data.selectIdList=tempIdList;
                        this.findRoleById(tempIdList,this.roleTreeList);

                        //通知方式转换
                        let tempTypeList=[];
                        let selectTypeArray=data.messageType.split(",");
                        for (let i = 0; i <selectTypeArray.length; i++) {
                            if (selectTypeArray[i]=="1"){
                                tempTypeList.push(1);
                            }else if (selectTypeArray[i]=="2") {
                                tempTypeList.push(2);
                            }
                        }
                        data.selectTypeList=tempTypeList;
                        this.modifys = data;
                        this.modifyVisible=true;
                    }
                });
            },
            modifySubmit:function(modifyForm){
                this.$refs[modifyForm].validate((valid) => {
                    if (valid) {
                        this.modifys.startTime=moment(this.modifys.startTime).format("YYYY-MM-DD");
                        this.modifys.endTime=moment(this.modifys.endTime).format("YYYY-MM-DD");
                        this.modifys.notificationTime=moment(this.modifys.notificationTime).format("YYYY-MM-DD HH:mm:ss");
                        this.modifys.messageType=this.modifys.selectTypeList.toString();
                        if (this.roleArray.length==0){
                            this.$Message.error("通知角色不能为空");
                            return;
                        };
                        this.acTiveArrStringFun(this.roleArray);
                        this.postRequest("/api/depp/saveOrUpdate",this.modifys).then(resp=>{
                            if (resp.code==20000){
                                this.roleArray=[];
                                this.$Message.success("修改成功");
                                this.modifyVisible=false;
                                this.loadData();
                            }
                        });
                    }
                });
            },
            openDelete:function(row){
                this.$Modal.confirm({
                    title: "提示",
                    content: "确定删除该条记录？",
                    onOk: () => {
                        this.getRequest("/api/depp/delete?id=" +row.id).then(res => {
                            if (res.code == 20000) {
                                this.$Message.success("删除成功!");
                                this.loadData();
                            } else {
                                this.$Message.error({
                                    content: res.message,
                                    duration: 5
                                });
                            }
                        });
                    },
                    onCancel: () => {

                    }
                });
            },
            onCancel:function(){
                this.addVisible=false;
                this.modifyVisible=false;
            },
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
        },
    }
</script>
